<template>
	<view class="member-page">
		<!-- 搜索栏 -->
		<!--
		<view class="search-bar">
			<view class="search-input">
				<text class="iconfont search-icon">&#xe61c;</text>
				<input type="text" placeholder="会员昵称 或 昵称/会员编号/手机号" placeholder-class="placeholder-style" />
			</view>
		</view>
		-->

		<!-- 数据卡片区域 -->
		<view class="data-cards">
			<!-- 我的社群卡片 -->
			<view class="card red-card">
				<text class="card-number">{{ oneArea.maxTotal }}</text>

				<view style="display: flex;align-items: center;	margin-bottom: 20rpx;">
					<view class="card-title">我的社群1 </view>
					<!--
					<view style="margin-left: 10rpx;" @click="showGroupTips">
						<image src='/static/question-circle.png' style="width: 30rpx;height: 30rpx;cursor: pointer;">
						</image>
					</view>
					-->
				</view>
				<view class="card-stats">
					<text>今日新增: {{ oneArea.oneAreaDayNum }}</text>
					<text>本月新增: {{ oneArea.oneAreaMonthNum }}</text>
				</view>
			</view>

			<!-- 我的代理卡片 -->
			<view class="card blue-card">
				<text class="card-number">{{ twoArea.maxTotal }}</text>
				<view style="display: flex;align-items: center;	margin-bottom: 20rpx;">
					<view class="card-title">我的社群2 </view>
					<!--
					<view style="margin-left: 10rpx;" @click="showAgentTips">
						<image src='/static/question-circle.png' style="width: 30rpx;height: 30rpx;cursor: pointer;">
						</image>
					</view>
					-->
				</view>
				<view class="card-stats">
					<text>今日新增: {{ twoArea.twoAreaDayNum }}</text>
					<text>本月新增: {{ twoArea.twoAreaMonthNum }}</text>
				</view>
			</view>
		</view>

		<!-- 标签切换栏 -->
		<view class="tabs">
			<text class="tab" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
				我的社群1
			</text>
			<text class="tab" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
				我的社群2
			</text>
			<!--
			<text class="tab-count">人数: {{ activeList.length }}人</text>
			<view style="display: flex;align-items: center;">
				<text class="tab-filter" @click="showFilter">筛选</text>
				<image src="/static/filter.png" style="width: 30rpx;height: 30rpx;margin-top: 6rpx;"></image>
			</view>
			-->
		</view>

		<!-- 列表区域 -->
		<view class="member-list">
			<view class="member-item" v-for="(member, index) in activeList" :key="index" @click="jumpone(member.user.user_id)">
				<view class="member-info" >
					<image class="member-avatar" :src="member.user.avatar" mode="cover"></image>
					<view class="member-detail">
						<view class="member-name">
							<text>{{ member.real_name }}</text>
							<image class="tag-icon" :src="member.tagIcon" mode="widthFix" v-if="member.tagIcon"></image>
							<text class="member-id">({{ member.user.identifier_sn }})</text>
							<text style="color: red;">{{ member.grade ? '(' + member.grade.name + ')' : '' }}</text>
						</view>
						<text class="member-phone">手机: {{ member.mobile }} </text>
					</view>
				</view>

				<!-- 数据统计行 -->
				<view class="member-stats">
					<view class="stat-item">
						<text class="stat-label">营业额1</text>
						<text class="stat-value">¥{{ member.maxTotal }}</text>
					</view>
					<view class="stat-item">
						<text class="stat-label">消费额</text>
						<text class="stat-value">¥{{ member.self_right_money }}</text>
					</view>
					
					<view class="stat-item">
						<text class="stat-label">营业额2</text>
						<text class="stat-value">¥{{ member.disothersTotal }}</text>
					</view>
					<!--
					<view class="stat-item">
						<text class="stat-label">{{ activeTab === 0 ? '社群人数' : '代理人数' }}</text>
						<text class="stat-value">{{ member.stats.peopleCount }}</text>
					</view>
					-->
				</view>

				<!-- 注册时间 -->
				<view class="register-time">
					<text>注册时间: {{ member.user.create_time }}</text>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="false">
				<image src="/static/empty.png" mode="widthFix" class="empty-img"></image>
				<text class="empty-text">暂无数据</text>
			</view>
		</view>

		<!-- 原生弹窗容器 (默认隐藏) -->
		<view id="modalContainer" class="modal-container" v-if="showModal">
			<view class="modal-mask" @click="closeModal"></view>
			<view class="modal-content">
				<view class="modal-title">{{ modalTitle }}</view>
				<view class="modal-text">
					<view v-for="(item, index) in modalContent" :key="index">{{ item }}</view>
				</view>
				<view class="modal-btn" @click="closeModal">我知道了</view>
			</view>
		</view>
	</view>
</template>

<script>
import { gotopage } from '../../../common/gotopage';

	export default {
		data() {
			return {
				activeTab: 0,
				showModal: false, // 控制弹窗显示/隐藏
				modalTitle: '', // 弹窗标题
				modalContent: [], // 弹窗内容列表
				oneArea:'',
				twoArea:'',
				groupData: {
					total: 12,
					todayNew: 2,
					monthNew: 5
				},
				agentData: {
					total: 3,
					todayNew: 0,
					monthNew: 1
				},
				groupList: [],
				agentList: [],
				isAll : 0
				
			};
		},
		onShow() {
			this.getUserData();
			this.getData();
			
		},
		computed: {
			activeList() {
				return this.activeTab === 0 ? this.groupList : this.agentList;
			}
		},
		methods: {
			getUserData() {
				let self = this;
				self.isloadding = true;
				self._get('user.index/detail', {
					url: self.url
				}, function(res) {
					if(res.data.userInfo.user_id == 1){
						self.isAll = 1;
					}
				})
			},
			jumpone(userid){
				let self = this;
				if(self.isAll == 1){
					gotopage('/pages/user/my-group/my-group-one?user_id='+userid)
				}
				
			},
			/*获取数据*/
			getData() {
				let self = this;
				self.loading = true;
				self._get('plus.agent.team/grop_lists', {
					level: 1,
					page: self.page || 1,
					list_rows: self.list_rows,
				}, function(res) {
					self.loading = false;
					self.oneArea = res.data.oneArea
					self.twoArea = res.data.twoArea
					self.groupList = res.data.oneAreaList
					self.agentList = res.data.twoAreaList
				}, null, function() {
					self.loading = false;
				});
			},
			switchTab(index) {
				this.activeTab = index;
			},
			showFilter() {
				uni.showActionSheet({
					itemList: ["按注册时间排序", "按消费金额排序", "按人数排序"],
					success: (res) => {
						console.log("筛选条件索引:", res.tapIndex);
					}
				});
			},
			// 显示社群说明弹窗
			showGroupTips() {
				this.modalTitle = "我的社群说明";
				this.modalContent = [
					"1. 社群成员指通过您直接或间接邀请加入的用户",
					"2. 今日新增为当天注册的社群成员数量",
					"3. 本月新增为当月注册的社群成员总量",
					"4. 社群成员可享受专属社群福利和优惠"
				];
				this.showModal = true;
				// 阻止页面滚动
				document.body.style.overflow = 'hidden';
			},
			// 显示代理说明弹窗
			showAgentTips() {
				this.modalTitle = "我的代理说明";
				this.modalContent = [
					"1. 代理指通过您申请成为代理身份的用户",
					"2. 今日新增为当天成功成为代理的用户数量",
					"3. 本月新增为当月成功成为代理的用户总量",
					"4. 代理可享受额外的推广佣金和权益"
				];
				this.showModal = true;
				// 阻止页面滚动
				document.body.style.overflow = 'hidden';
			},
			// 关闭弹窗
			closeModal() {
				this.showModal = false;
				// 恢复页面滚动
				document.body.style.overflow = '';
			}
		}
	};
</script>

<style scoped>
	/* 原有样式保持不变 */
	.member-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 20rpx;
	}

	.search-bar {
		padding: 20rpx;
		background-color: #fff;
	}

	.search-input {
		display: flex;
		align-items: center;
		background-color: #f2f2f2;
		border-radius: 60rpx;
		padding: 16rpx 30rpx;
	}

	.search-icon {
		color: #999;
		font-size: 28rpx;
		margin-right: 10rpx;
	}

	.placeholder-style {
		color: #999;
		font-size: 26rpx;
	}

	.data-cards {
		display: flex;
		padding: 20rpx;
		gap: 20rpx;
	}

	.card {
		flex: 1;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		color: #fff;
		position: relative;
		overflow: hidden;
	}

	.red-card {
		background: linear-gradient(135deg, #ff4d4f, #f5222d);
	}

	.blue-card {
		background: linear-gradient(135deg, #1890ff, #096dd9);
	}

	.card-number {
		font-size: 40rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}

	.card-title {
		font-size: 32rpx;
		display: block;
	}

	.card-stats {
		font-size: 24rpx;
		opacity: 0.9;
		line-height: 1.6;
		display: flex;
		justify-content: space-between;
	}

	.tabs {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 0 20rpx;
		height: 80rpx;
		border-bottom: 1rpx solid #eee;
	}

	.tab {
		font-size: 28rpx;
		padding: 0 20rpx;
		height: 100%;
		display: flex;
		align-items: center;
		position: relative;
		cursor: pointer;
	}

	.tab.active {
		color: #f5222d;
		font-weight: 500;
	}

	.tab.active::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 20rpx;
		right: 20rpx;
		height: 4rpx;
		background-color: #f5222d;
	}

	.tab-count {
		margin-left: auto;
		font-size: 26rpx;
		color: #666;
	}

	.tab-filter {
		font-size: 26rpx;
		color: #666;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	/* 	.tab-filter::after {
		content: "⌄";
		font-size: 40rpx;
		margin-left: 5rpx;
		margin-top: -30rpx;
	} */

	.member-list {
		padding: 20rpx;
	}

	.member-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 25rpx;
		margin-bottom: 20rpx;
	}

	.member-info {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.member-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.member-detail {
		flex: 1;
	}

	.member-name {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.tag-icon {
		width: 60rpx;
		height: 24rpx;
		margin: 0 10rpx;
	}

	.member-id {
		font-size: 24rpx;
		color: #999;
	}

	.member-phone {
		font-size: 24rpx;
		color: #666;
	}

	.member-stats {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 10rpx 0;
		margin-bottom: 20rpx;
	}

	.stat-item {
		flex: 1;
		text-align: center;
	}

	.stat-label {
		font-size: 22rpx;
		color: #999;
		display: block;
		margin-bottom: 5rpx;
	}

	.stat-value {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	.register-time {
		font-size: 24rpx;
		color: #999;
		padding-top: 15rpx;
		border-top: 1rpx dashed #eee;
	}

	.empty-state {
		padding: 80rpx 0;
		text-align: center;
	}

	.empty-img {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	/* 原生弹窗样式 */
	.modal-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.modal-content {
		width: 600rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		position: relative;
		z-index: 10;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
		color: #333;
	}

	.modal-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.8;
		margin-bottom: 40rpx;
	}

	.modal-text view {
		margin-bottom: 15rpx;
	}

	.modal-text view:last-child {
		margin-bottom: 0;
	}

	.modal-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #f5222d;
		color: #fff;
		font-size: 28rpx;
		border-radius: 10rpx;
		cursor: pointer;
	}
</style>